<template>
  <div>


    <el-card class="form-card" style="height: 200px">
      <div slot="header" class="clearfix">
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">
              <i class="el-icon-s-promotion"></i> 首页
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/activity-list' }">
              <i class="el-icon-s-promotion"></i> 活动列表
            </el-breadcrumb-item>
            <el-breadcrumb-item>奖品绑定</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div>
        <el-descriptions title="活动信息">
          <el-descriptions-item label="活动名称">{{ activty.name }}</el-descriptions-item>
          <el-descriptions-item label="活动开始时间">{{ activty.startTime }}</el-descriptions-item>
          <el-descriptions-item label="活动结束时间">{{ activty.endTime }}</el-descriptions-item>
          <el-descriptions-item label="活动状态">
            <el-tag size="small">
              <span v-if="activty.status==0">待审批</span>
              <span v-if="activty.status==1">启用</span>
              <span v-if="activty.status==2">禁用</span>
              <span v-if="activty.status==3">已结束</span>
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="活动描述">{{ activty.description }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card class="form-card" style="margin-top: 20px">
      <h4 style="margin-bottom: 20px;margin-top: 20px">活动奖品</h4>
      <el-button type="primary"
                 size="small"
                 style="position: relative;
                 top: -45px;float: right;"
                 @click="loadTableData">添加奖品
      </el-button>
      <el-table
          :data="prizeList"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="60"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="奖品名称"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            label="奖品图片"
            width="140"
            align="center">
          <template slot-scope="scope">
            <img :src="scope.row.img" style="width: 100%;height: 100%">
          </template>
        </el-table-column>
        <el-table-column
            prop="description"
            label="奖品简介"
            align="center">
        </el-table-column>
        <el-table-column
            prop="stock"
            label="奖品库存"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="value"
            label="奖品价值"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="220"
            align="center">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100"
            align="center">
          <template slot-scope="scope">
            <el-popconfirm
                title="确定删除奖品吗？" @confirm="handleDelete(scope.row.id)">
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                         circle></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        title="选择奖品"
        :visible.sync="centerDialogVisible"
        :lock-scroll="false"
        :modal-append-to-body="true"
        center>
      <div style="height: 500px; overflow-y: auto;">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="ID"
              width="60"
              align="center">
          </el-table-column>
          <el-table-column
              prop="name"
              label="奖品名称"
              width="120"
              align="center">
          </el-table-column>
          <el-table-column
              label="奖品图片"
              width="140"
              align="center">
            <template slot-scope="scope">
              <img :src="scope.row.img" style="width: 100%;height: 100%">
            </template>
          </el-table-column>
          <el-table-column
              prop="description"
              label="奖品简介"
              align="center">
          </el-table-column>
          <el-table-column
              prop="stock"
              label="奖品库存"
              width="80"
              align="center">
          </el-table-column>
          <el-table-column
              prop="value"
              label="奖品价值"
              width="80"
              align="center">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间"
              width="220"
              align="center">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addActivityPrize">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import axios from "axios";

export default {
  data() {
    return {
      activty: '',
      prizeList: [],
      centerDialogVisible: false,
      tableData: [],
      multipleSelection: []
    };
  },

  methods: {
    goBack() {
      this.$router.push("/home/activity-list")
    },


    submitForm() {
      axios.post("http://localhost:9090/draw/prize/save", this.form, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            console.log(response)
            if (response.data.state == 0) {
              this.$message.success("新增成功");
              this.$router.push("/home/prize-list")
            } else {
              this.$message.error("新增失败")
            }
          }
      )
    },
    loadPrizeList() {
      const id = this.$route.query.id;
      axios.get("http://localhost:9090/draw/prize/findPrize/" + id, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            console.log(response)
            this.prizeList = response.data.data;
          }
      )

    },
    loadActivity() {
      const id = this.$route.query.id;
      axios.post("http://localhost:9090/draw/activity/" + id, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            if (response.data.state == 0) {
              this.activty = response.data.data;
            } else {
              this.$message.error(response.data.message)
            }
          }
      )
    },
    loadTableData() {
      this.centerDialogVisible = true
      const id = this.$route.query.id;
      axios.get("http://localhost:9090/draw/price/noBindPrize/" + id, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            console.log(response)
            this.tableData = response.data.data;
          }
      )
    },
    addActivityPrize() {
      this.centerDialogVisible = false

      const modifiedData = this.multipleSelection.map((item, index) => {
        return { ...item, activityId:  parseInt(this.$route.query.id) };
      });
      const activityPrize = modifiedData.map(({ id, ...rest }) => {
        return { prizeId:id, ...rest };
      });
      axios.post("http://localhost:9090/draw/activity-prize/save" ,activityPrize, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            if (response.data.state == 0) {
              this.$message.success("绑定成功");
              this.loadPrizeList();
            } else {
              this.$message.error("绑定失败")
            }
          }
      )
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  created() {
    this.loadActivity();
    this.loadPrizeList();
  }
}
</script>

<style>
.el-dialog {
  width: 75% !important;
}
</style>